<template>
    <div class="home">
        <Header head-title="添加家人" go-back="true"></Header>

        <p class="fonts pFamily">国家卫健委要求，就医行为必须实名登记</p>

        <section class="group">
          <div class="resultInfo Select">
                <div class="Select">
                    <p class="fonts">关系</p>
                </div>
                <div class="arrow Select">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <p class="fonts">姓名</p>
                </div>
                <div class="Select">
                    <input type="text" class="Back_input" placeholder="请输入真实姓名">
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <p class="fonts">身份证号</p>
                </div>
                <div class="Select">
                    <input type="text" class="Back_input" placeholder="请输入身份证号">
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <p class="fonts">手机号</p>
                </div>
                <div class="Select">
                    <input type="text" class="Back_input" placeholder="请输入手机号">
                </div>
            </div>
            <p class="fonts activecolor Ass_p">注意：儿童身份证信息可以在户口本上查看</p>
            <div class="resultInfo Select">
                <div class="Select">
                    <p class="fonts">地址</p>
                </div>
                <div class="Select">
                    <p class="fonts" @click="SelectAdd()">
                      {{ Selectdress }}
                    </p>

                </div>
            </div>
            <div class="resultInfo">
                <input type="text" class="Back_input Back_inputL" placeholder="请输入详细地址">
            </div>
        </section>
        <AlanCascadingPicker v-model="isPicker" :data="addressData" :initial="initial" @ok="selectAddress" @cancel="cancelAddress" />

        <el-button @click="PriMary()" type="primary" class="Login gotoPay">确认</el-button>

    </div>
</template>
<script>

import Header from '../../../components/Header'
import addressData from 'cascading-picker/dist/AddressData'

export default {
  data () {
    return {
      isPicker: false,
      addressData: addressData,
      initial: {
        first: '北京市',
        second: '东城区',
        third: '新华区'
      },
      Selectdress: '选择省、市、区',

      options: [{ value: '1', label: '父母' },
        { value: '2', label: '子女' },
        { value: '4', label: '配偶' },
        { value: '6', label: '本人' },
        { value: '7', label: '其他' }],
      value: ''
    }
  },
  created () {
  },
  components: {
    Header
  },
  methods: {
    selectAddress (res) {
      this.Selectdress = `${res.first}-${res.second}-${res.third}`
      console.log(`你选中的是：${res.first},${res.second},${res.third}`)
    },
    cancelAddress () {
      console.log('你取消了地址选择器')
    },
    SelectAdd () {
      this.isPicker = true
    },
    PriMary () {
      this.$router.push({
        path: '/Family'
      })
    }
  }
}
</script>

<style scoped>
.pFamily {
    background: #eaeaea;
    padding: 0.2rem 0;
}
.resultInfo:nth-last-of-type(1){
  border-bottom: 0.02rem solid #ddd;
  padding: 0 0 0.3rem;
}
.Back_input {
  border-bottom: none;
  line-height: 0.6rem;
  text-align: right;
}
.Back_inputL {
  text-align: left;
  width: 100%;
}
</style>
<style>
.Cascading-picker .picker-item {
  height: 100rem;
}
</style>
